<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">

<title>${_title}</title>

<!-- Bootstrap core CSS -->

<link href="${_css}/bootstrap.min.css" rel="stylesheet">

<link href="${_font}/css/font-awesome.min.css" rel="stylesheet">
<link href="${_css}/animate.min.css" rel="stylesheet">

<!-- Custom styling plus plugins -->
<link href="${_css}/custom.css" rel="stylesheet">
<link href="${_css}/icheck/flat/green.css" rel="stylesheet">
<link href="${_css}/datatables/tools/css/dataTables.tableTools.css" rel="stylesheet">
<link rel="stylesheet" href="${_css}/base.css">
<script src="${_js}/jquery.min.js"></script>
<script src="${_js}/resize.js"></script>
<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
          <script src="/static/script/ie8/html5shiv.min.js"></script>
          <script src="/static/script/ie8/respond.min.js"></script>
<![endif]-->
<style>
td a {
	cursor: pointer
}
</style>
</head>


<body style="background: #F7F7F7;">
	<div class="">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>已完成的还款</h2>
						<div class="clearfix"></div>
					</div>	
						<div class="pull-right">
	                    	<button id="query" type="button" class="btn btn-info">查询</button>
	                    	<button id="export" type="button" class="btn btn-primary export">导出</button>
	                    </div>
						<form class="form-horizontal form-label-left input_mask" id="borrowRepayForm">
	                        <div class="col-md-2 col-sm-2 col-xs-6 form-group has-feedback">
	                            <input type="text" class="form-control has-feedback-left" name="matchTitle" id="matchTitle" value="<#if matchTitle?exists>${matchTitle}</#if>"
	                            placeholder="输入借款标题">
	                        </div>
                        <form class="form-horizontal">
							<fieldset>
								<div class="control-group">
									<div class="controls" style="margin-left: 30px;">
										<div class="input-prepend input-group">
											<span class="add-on input-group-addon">
												<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
											</span>
											<input type="text" style="width: 200px" name="expectPaymentDate" id="reservation2" placeholder="请选择实际还款时间段"
											class="form-control" value="" />
											</div>
										</div>
									</div>
								</div>
							</fieldset>
						</form>
                     </form>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="scroll">
					<div class="x_content">
						<div class="x_content">
							<table id="example" data-action="/admin/borrowPayment/listBorrowRepay?1=1" 
								class="table table-striped responsive-utilities jambo_table">
								<thead>
									<tr class="headings">
										<th><input type="checkbox" class="tableflat"></th>
										<th>序号</th>
										<th>借款标标题</th>
										<th>还款期数</th>
										<th>已还金额(￥)</th>
										<th>已还本金(￥)</th>
										<th>已还利息(￥)</th>
										<th>未还总额(￥)</th>
										<th>未还本金(￥)</th>
										<th>未还利息(￥)</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<#if (pageInfo?exists & pageInfo.pageList?size > 0)> 
									<#list pageInfo.pageList as item>
									<tr class="even pointer">
										<td class="a-center ">
											<input type="checkbox" class="tableflat" data-id="${item.borrowId}">
										</td>
										<td>${item_index+1}</td>
										<td>
											<#if item.title?exists>
		                                		${item.title}
		                                	</#if>
										</td>
										<td>
											<#if item.period?exists>
		                                		${item.period}期
		                                	</#if>
										</td>
										<td>
											<#if item.paymentTotal?exists & item.notPaymentTotal?exists>
		                                		<#if (item.paymentTotal-item.notPaymentTotal != 0 )>
			                                		${(item.paymentTotal-item.notPaymentTotal)?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<#if item.paymentFund?exists & item.notPaymentFund?exists>
		                                		<#if (item.paymentFund-item.notPaymentFund != 0 )>
			                                		${(item.paymentFund-item.notPaymentFund)?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<#if item.paymentInterest?exists & item.notPaymentInterest?exists>
		                                		<#if (item.paymentInterest-item.notPaymentInterest != 0 )>
			                                		${(item.paymentInterest-item.notPaymentInterest)?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<#if item.notPaymentTotal?exists>
		                                		<#if (item.notPaymentTotal != 0 )>
			                                		${item.notPaymentTotal?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<#if item.notPaymentFund?exists>
		                                		<#if (item.notPaymentFund != 0 )>
			                                		${item.notPaymentFund?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<#if item.notPaymentInterest?exists>
		                                		<#if (item.notPaymentInterest != 0 )>
			                                		${item.notPaymentInterest?string('0.00')}
			                                	<#else>
			                                	 	0.00
			                                	</#if>
		                                	</#if>
										</td>
										<td>
											<a href="/admin/borrowPayment/listBorrowPayment?borrowId=${item.borrowId}">查看还款情况</a></td>
									</tr>
									</#list> 
									<#else>
										<tr class="even pointer">
											<td colspan="14">无记录</td>
										</tr>
									</#if>
								</tbody>
							</table>
							<#if (pageInfo.pageList?size > 0)> 
								<#include "../base/Page.ftl"> 
							</#if>
							<div id="pageCollect">
								共计：<span style="color:#1ABB9C">${pageInfo.total}</span>笔，
								已还总额：<span style="color:#1ABB9C">${pageInfo.sum}</span>元，
								已还本金：<span style="color:#1ABB9C">${pageInfo.sumComplete}</span>元，
								已还利息：<span style="color:#1ABB9C">${pageInfo.sumFee}</span>元
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="${_js}/bootstrap.min.js"></script>

		<!-- bootstrap progress js -->
		<script src="${_js}/progressbar/bootstrap-progressbar.min.js" type="text/javascript"></script>
		<script src="${_js}/nicescroll/jquery.nicescroll.min.js" type="text/javascript"></script>
		<!-- icheck -->
		<script src="${_js}/icheck/icheck.min.js" type="text/javascript"></script>

		<script src="${_js}/custom.js" type="text/javascript"></script>
		
    	<!--[if lte IE 8]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    	
		<!-- PNotify -->
	    <script src="${_js}/notify/pnotify.core.js" type="text/javascript"></script>
	    <script src="${_js}/notify/pnotify.buttons.js" type="text/javascript"></script>
	    <script src="${_js}/notify/pnotify.nonblock.js" type="text/javascript" ></script>

		<!-- daterangepicker -->
		<script type="text/javascript" src="${_js}/datepicker/moment.min2.js"></script>
		<script type="text/javascript" src="${_js}/datepicker/daterangepicker.js"></script>
		<script type="text/javascript" src="${_front_js}/date.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('input.tableflat').iCheck({
					checkboxClass : 'icheckbox_flat-green',
					radioClass : 'iradio_flat-green'
				});
				$('#reservation').daterangepicker(null, function (start, end, label) {
		            //console.log(start.toISOString(), end.toISOString(), label);
		        });
		        
		        $('#reservation2').daterangepicker(null, function (start, end, label) {
		            //console.log(start.toISOString(), end.toISOString(), label);
		        });
			});
			
			function initData(action) { 
				var status = $("#status").find("option:selected").val();
				var matchTitle = $.trim($("#matchTitle").val());
				var reservation = $("#reservation").val();
				var reservation2 = $("#reservation2").val();
		    	var reg = /^\d{4}[-]\d{2}[-]\d{2}~\d{4}[-]\d{2}[-]\d{2}$/;
		    	if((reservation2 !="" && !reg.test(reservation2))){
					new PNotify({
				            	title: '操作提示',
				            	text: '时间格式错误！',
				            	delay: 3e3,
				            	type: 'error'
				        	});
				    return false;
				}
				if(status != ""){
					action +="&status="+status;
				}
				var splitChar = "~";
		    	if(reservation2 !=""){
		    		if(reservation2.indexOf(splitChar) != -1){
		    			var actualDateBegin = $.trim(reservation2.split(splitChar)[0]);
		    			var actualDateEnd = $.trim(reservation2.split(splitChar)[1]);
		    			action +="&actualDateBegin="+actualDateBegin;
		    			action +="&actualDateEnd="+actualDateEnd;
		    		}
		    	}
		    	if(matchTitle != ""){
		    		action +="&matchTitle="+matchTitle;
		    	}
				window.location.href=action;
			} 
			
			$("#export").click(function(){
				var count=0;
				var ids=new Array();
				var status = "";
				$("tbody .tableflat").each(function(){
					if($(this).parent().hasClass('checked')){
						ids[count]=$(this).attr("data-id");
						count++;
					}
				})
		    	var reservation = $("#reservation").val();
		    	var reservation2 = $("#reservation2").val();
		    	var reg = /^\d{4}[-]\d{2}[-]\d{2}~\d{4}[-]\d{2}[-]\d{2}$/;
		    	if((reservation2 !="" && !reg.test(reservation2))){
					new PNotify({
				            	title: '操作提示',
				            	text: '时间格式错误！',
				            	delay: 3e3,
				            	type: 'error'
				        	});
				    return false;
				}
				var action="/admin/export/borrow/repay?ids="+ids;
				
				$("#borrowRepayForm").attr("method","post");
				$("#borrowRepayForm").attr("action",action);
				$("#borrowRepayForm").submit();
			});	
			
			$(".btn-info").click(function(){
				initData($("#example").attr('data-action'));
			});
		</script>
		
<script language="javascript" type="text/javascript">  
    $(function () {  
		$('.headings input').on('ifChecked', function(event){
		  $("tbody :checkbox").iCheck('check');
		});

		$('.headings input').on('ifUnchecked', function(event){
		  $("tbody :checkbox").iCheck('uncheck');
		});
    });  
    
    var actualPaymentDateBegin = "<#if actualPaymentDateBegin?exists>${actualPaymentDateBegin}</#if>";
    var actualPaymentDateEnd = "<#if actualPaymentDateEnd?exists>${actualPaymentDateEnd}</#if>";
    if(actualPaymentDateBegin != "" && actualPaymentDateEnd != ""){
    	document.getElementById("reservation2").value=actualPaymentDateBegin+"~"+actualPaymentDateEnd;
    }
</script> 